<template>
  <div>
    <transition name="fade">
      <PreloaderTwo v-if="show" />
    </transition>

    <header
      class="header-section home2"
      :class="{ 'header-fixed fadeInUp': scrollPosition > 100 }"
    >
      <div class="header-bottom">
        <div class="container">
          <div class="header-wrapper">
            <div class="header-start header-start--style2">
              <div class="logo">
                <nuxt-link to="/">
                  <img src="/images/logo/2.png" alt="logo" />
                </nuxt-link>
              </div>
              <div class="menu-area">
                <ul class="menu menu--style2" :class="{ active: menuActive }">
                  <li>
                    <nuxt-link to="javascript:void(0);">Homes </nuxt-link>
                    <ul class="submenu">
                      <li>
                        <nuxt-link to="/">Home 1</nuxt-link
                        >
                      </li>
                      <li>
                        <nuxt-link to="/index2">Home 2</nuxt-link
                        >
                      </li>
                      <li>
                        <nuxt-link to="/index3">Home 3</nuxt-link
                        >
                      </li>
                      <li>
                        <nuxt-link to="/index4">Home 4</nuxt-link
                        >
                      </li>
                    </ul>
                  </li>
                  <li>
                    <nuxt-link to="javascript:void(0);">Courses</nuxt-link>
                    <ul class="submenu">
                      <li>
                        <nuxt-link to="/courses">Courses</nuxt-link
                        >
                      </li>
                      <li>
                        <nuxt-link to="/course-details">Courses Details</nuxt-link
                        >
                      </li>
                      <li>
                      <nuxt-link to="/course-category"
                        >Courses Category</nuxt-link
                      >
                    </li>
                      <li>
                        <nuxt-link to="/mentors">Mentors</nuxt-link
                        >
                      </li>
                      <li>
                        <nuxt-link to="/mentor-details">Mentor Details</nuxt-link
                        >
                      </li>
                    </ul>
                  </li>
                  <li>
                    <nuxt-link to="javascript:void(0);">Blogs</nuxt-link>
                    <ul class="submenu">
                      <li>
                        <nuxt-link to="/blogs">Blogs
                        </nuxt-link>
                      </li>
                      <li>
                      <nuxt-link to="/blogs2"
                        >Blogs 2
                      </nuxt-link>
                    </li>
                      <li>
                        <nuxt-link to="/blog-details">Blog Details</nuxt-link
                        >
                      </li>
                    </ul>
                  </li>
                  <li>
                    <nuxt-link to="javascript:void(0);"
                      >Pages</nuxt-link
                    >
                    <ul class="submenu">
                      <li>
                        <nuxt-link to="/about">About Us</nuxt-link
                        >
                      </li>
                      <li>
                        <nuxt-link to="/gallery">Gallery</nuxt-link
                        >
                      </li>
                      <li>
                        <nuxt-link to="/cart">Cart</nuxt-link
                        >
                      </li>
                      <li>
                        <nuxt-link to="/checkout">Checkout</nuxt-link
                        >
                      </li>
                      <li>
                        <nuxt-link to="/signup">登录</nuxt-link
                        >
                      </li>
                      <li>
                        <nuxt-link to="/signin">Sign In</nuxt-link
                        >
                      </li>
                      <li>
                        <nuxt-link to="/forgot-password">Reset Password</nuxt-link
                        >
                      </li>
                      <li>
                        <nuxt-link to="/about">404 Error</nuxt-link
                        >
                      </li>
                    </ul>
                  </li>
                  <li>
                    <nuxt-link to="/contact">Contact Us</nuxt-link>
                  </li>
                </ul>
              </div>
            </div>
            <div class="header-end">
              <div class="menu-area">
                <div class="header-btn">
                  <nuxt-link to="/signup" class="text-btn">
                    <span>登录</span>
                  </nuxt-link>
                  <nuxt-link
                    to="/signin"
                    class="trk-btn trk-btn--border trk-btn--secondary2"
                    >Get Started
                    <span><i class="fa-solid fa-arrow-right"></i></span>
                  </nuxt-link>
                </div>

                <!-- toggle icons -->
                <div class="header-bar d-xl-none home2" :class="{ active: menuActive }" @click="toggleMenu()">
                  <span></span>
                  <span></span>
                  <span></span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </header>
  </div>
</template>

<script>
import PreloaderTwo from "@/components/partials/preloaders/PreloaderTwo.vue";
export default {
  name: "Header",
  components: { PreloaderTwo },
  data() {
    return {
      scrollPosition: 0,
      show: true,
      menuActive: false
    };
  },

  watch: {
    $route() {
      this.show = false;
      this.closeMenu()
    },
  },

  created() {
    setTimeout(() => {
      this.show = false;
    }, 200);

    if (process.client) {
      window.addEventListener("scroll", this.handleScroll);
    }
  },
  destroyed() {
    if (process.client) {
      window.removeEventListener("scroll", this.handleScroll);
    }
  },
  mounted() {
    this.initializeMenu()
  },
  methods: {
    handleScroll() {
      if (process.client) {
        this.scrollPosition = window.scrollY;
      }
    },

    toggleMenu() {
      this.menuActive = !this.menuActive;
      document.querySelectorAll(".menu li.menu-item-has-children").forEach(function (item) {
        item.classList.remove("open");
        item.querySelector('.submenu').style.display = "none";
      });
    },
    closeMenu() {
      this.menuActive = false;
      document.querySelectorAll(".menu li.menu-item-has-children").forEach(function (item) {
        item.classList.remove("open");
        item.querySelector('.submenu').style.display = "none";
      });
    },

    initializeMenu() {

      var submenuList = document.querySelectorAll("ul>li>.submenu");
      submenuList.forEach(function (submenu) {
        var parentLi = submenu.parentElement;
        if (parentLi) {
          parentLi.classList.add("menu-item-has-children");
        }
      });

      // Toggle menu on click

      if (parseInt(window.innerWidth) < 1200) {

        var menuList = document.querySelectorAll(".menu>li.menu-item-has-children>a");

        menuList.forEach(function (link) {
          link.addEventListener("click", function (e) {


            e.stopPropagation(); 
            var element = link.parentElement;

            var links = document.querySelectorAll(".menu>.menu-item-has-children");

            links.forEach(function (item, index) {

              if (element != item) {
                item.classList.remove("open");
                item.querySelector('.submenu').style.display = "none";
              } else {

                if (item.classList.contains("open")) {
                  item.querySelector('.submenu').style.display = "none";
                } else {
                  item.querySelector('.submenu').style.display = "block";
                }
                item.classList.toggle("open");

              }

            })


          });
        });

      } else {

        // Fix dropdown menu overflow problem
        var menuList = document.querySelectorAll(".menu>li.menu-item-has-children>a");
        menuList.forEach(function (submenu) {
          var parentLi = submenu.parentElement;
          if (parentLi) {
            parentLi.addEventListener("mouseover", function () {

              var links = document.querySelectorAll(".menu>.menu-item-has-children");

              links.forEach(function (item, index) {
                

                if (item != submenu) {

                  item.classList.remove("open");
                  item.querySelector('.submenu').style.display = "block";

                } else {
                  item.classList.toggle("open");
                  item.querySelector('.submenu').style.display = "none";
                }

              })

              var menuPos = submenu?.getBoundingClientRect();
              if (menuPos.left + submenu.offsetWidth > window.innerWidth) {
                submenu.style.left = -submenu.offsetWidth + "px";
              }

            });
          }
        });

      }

    },
    scrollingTop() {
      window.scrollTo(0, 0);
    },
  },
};
</script>